<template>
  <div>
    <div class="margin-container-list">

      <!--商品状态 -->
      <div>
        <el-tabs v-model="pagingStatus" @tab-click="goodsStatusClick">
          <el-tab-pane :label="statusOne" name="0"></el-tab-pane>
          <el-tab-pane :label="statusTwo" name="1"></el-tab-pane>
          <el-tab-pane :label="statusThree" name="2"></el-tab-pane>
        </el-tabs>
      </div>

      <!--顶部搜索 -->
      <div class="top-operate">
        <div>
          <div class="float-l">
            <el-input @keyup.enter.native="handleSearch" v-model="searchListQuery.keyword"
                      placeholder="请输入关键词" style="width: 300px"></el-input>
            <el-date-picker
              v-model="searchListQuery.startDate"
              align="right"
              type="date"
              class="width-date mar-r-10"
              placeholder="开始日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions1">
            </el-date-picker>

            <el-date-picker
              v-model="searchListQuery.endDate"
              align="right"
              type="date"
              class="width-date mar-r-10"
              placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions2">
            </el-date-picker>
            <el-button type="primary" plain @click="handleSearch">查询</el-button>
          </div>
          <br>
          <el-button @click="shopSetting()" type="primary">店铺设置</el-button>

          <template v-if="pagingStatus == '0'">
            <el-button @click="handleBatchAgree()">批量通过</el-button>
            <el-button @click="handleBatchRefuse()">批量拒绝</el-button>
          </template>
        </div>
      </div>

      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" @selection-change="handleSelectionChange"
                  :data="dataList" v-loading="listLoading"
                  element-loading-text="加载中" style="width: 100%">
          <el-table-column width="50px" type="selection" align="center"></el-table-column>
          <el-table-column label="序号" width="70px">
            <template slot-scope="scope">
              <span>{{getIndex(scope.$index)}}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="300px" label="微客" prop="userInfo">
            <template slot-scope="scope">
              <div @click="handleUpdate(scope.row)" class="flex v-align-c cursor-p">
                <label><img :src="scope.row.avatar" class="user-avatar"></label>
                <div class="font-14 pad-l-10">
                  <div>昵称：{{scope.row.nickname}}</div>
                  <div>姓名：{{scope.row.realName}}</div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column width="250px" label="性质" prop="nature">
            <template slot-scope="scope">
              {{dict.nature[scope.row.nature]}}
            </template>
          </el-table-column>
          <el-table-column width="250px" label="申请时间" prop="createTime"></el-table-column>
          <el-table-column width="250px" label="备注" prop="remark">
            <template slot-scope="scope">
              <el-input style="width: 150px" @change="changeRemark(scope.row)" v-model="scope.row.remark">
              </el-input>
            </template>
          </el-table-column>

          <el-table-column min-width="250px" label="操作">
            <template slot-scope="scope">
              <template v-if="scope.row.status == '0'">
                <el-button type="success" @click="updateStatus(scope.row,1)">通过</el-button>
                <el-button type="danger" @click="updateStatus(scope.row,2)">拒绝</el-button>
              </template>
              <template v-if="scope.row.status == '1'">
                <p style="color: blue">通过</p>
              </template>
              <template v-if="scope.row.status == '2'">
                <p style="color: #ff001d">拒绝</p></template>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="searchListQuery.currentPage"
                       :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>

    </div>
  </div>

</template>

<style scoped>
  .user-avatar {
    width: 46px;
    height: 46px;
    display: block;
    border-radius: 50px;
  }
</style>


<script>
  import {
    pagingProjectGoodsApply,
    updateProjectGoodsApplyStatus,
    changeApplyRemark,
    handleBatchAgreeRefuse,
    countGoodsApply
  } from '@/api/goods/goods'
  import { getDictByGroupName } from '@/api/common/common'

  export default {
    data() {
      return {
        total: null,
        multipleSelection: [],
        listLoading: true,
        searchListQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10,
          status: '0',
          keyword: '',
          startDate: '',
          endDate: ''
        },
        pickerOptions1: {
          disabledDate: (time) => {
            if (this.endDate) {
              return time.getTime() > new Date(this.endDate)
            }
          }
        },
        pickerOptions2: {
          disabledDate: (time) => {
            if (this.startDate) {
              return time.getTime() < new Date(this.startDate)
            }
          }
        },
        dict: {},
        isDict: false,
        pagingStatus: '0',
        categoryIds: [],
        dataList: [],
        editableTabsValue: '2',
        editableTabs: [],
        statusOne: '待审核（0）',
        statusTwo: '已通过（0）',
        statusThree: '已拒绝（0）',
        // 商品的所有分类json
        categoryData: []
      }
    },
    // 初始化页面
    created() {
      this.initDataList()
      this.initDict()
    },
    methods: {
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initDataList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initDataList()
      },
      initDataList() {
        this.listLoading = true
        // 搜索状态
        this.searchListQuery.status = this.pagingStatus

        pagingProjectGoodsApply(this.searchListQuery).then(response => {
          this.total = response.total
          this.dataList = response.records
          this.listLoading = false
          this.countGoodsApply()
        })
      },
      countGoodsApply() {
        const enterpriseId = this.getEnterpriseId()
        const data = {
          enterpriseId: enterpriseId
        }
        countGoodsApply(data).then(response => {
          const projectGoodsApplyDTOS = response.data.projectGoodsApplyDTOS

          projectGoodsApplyDTOS.forEach(apply => {
            const name = apply.status
            if (name * 1 === 0) {
              const title = '待审核（' + apply.applyCount + ')'
              this.statusOne = title
            }
            if (name * 1 === 1) {
              const title = '已通过（' + apply.applyCount + ')'
              this.statusTwo = title
            }
            if (name * 1 === 2) {
              const title = '已拒绝（' + apply.applyCount + ')'
              this.statusThree = title
            }
          })
        })
      },
      restData() {
        this.searchListQuery.page = 1
        this.searchListQuery.currentPage = 1
      },
      // 商品状态
      goodsStatusClick() {
        this.restData()
        this.initDataList()
      },
      handleSearch() {
        this.searchListQuery.page = 1
        this.searchListQuery.currentPage = 1
        this.initDataList()
      },
      initDict() {
        getDictByGroupName('MemberDTO').then(response => {
          this.dict = response.data
        })
      },
      updateStatus(row, status) {
        this.$confirm('确认后无法撤回，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var data = {
            applyId: row.applyId,
            status: status
          }
          updateProjectGoodsApplyStatus(data).then(response => {
            this.initDataList()
          })
        })
      },
      changeRemark(row) {
        const data = {
          remark: row.remark,
          applyId: row.applyId
        }
        changeApplyRemark(data).then(response => {
          console.log(response)
        })
      },
      getIndex(index) {
        return (this.searchListQuery.page - 1) * this.searchListQuery.size + index + 1
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleBatchAgree() {
        const selections = this.multipleSelection
        const applyIds = []
        selections.forEach(e => {
          applyIds.push(e.applyId)
        })

        var data = {
          applyIds: applyIds,
          status: 1
        }
        handleBatchAgreeRefuse(data).then(response => {
          this.initDataList()
        })
      },
      handleBatchRefuse() {
        const selections = this.multipleSelection
        const applyIds = []
        selections.forEach(e => {
          applyIds.push(e.applyId)
        })

        var data = {
          applyIds: applyIds,
          status: 2
        }
        handleBatchAgreeRefuse(data).then(response => {
          this.initDataList()
        })
      },
      shopSetting() {
        this.$router.push({ path: '/card/setting/index', query: {}})
      }
    }
  }
</script>
